<template>
  <div class="container">
    <div class="card">
      <h1>🔗 单词配对游戏</h1>
      
      <div v-if="!gameStarted" class="game-intro">
        <p>将英文单词与正确的中文含义配对</p>
        <div class="game-controls">
          <button class="btn" @click="startGame">开始游戏</button>
        </div>
      </div>
      
      <div v-else-if="gameEnded" class="game-result">
        <h2>游戏结束！</h2>
        <div class="score-display">
          <div class="score">得分: {{ score }}/{{ totalWords }}</div>
          <div class="accuracy">正确率: {{ accuracy }}%</div>
          <div class="time">用时: {{ formatTime(timeElapsed) }}</div>
        </div>
        <div class="game-controls">
          <button class="btn" @click="restartGame">再玩一次</button>
          <button class="btn" @click="goHome">返回首页</button>
        </div>
      </div>
      
      <div v-else class="game-area">
        <div class="game-info">
          <div class="score">得分: {{ score }}/{{ totalWords }}</div>
          <div class="timer">时间: {{ formatTime(timeElapsed) }}</div>
        </div>
        
        <div class="matching-area">
          <div class="words-column">
            <h3>英文单词</h3>
            <div 
              v-for="(word, index) in englishWords" 
              :key="index"
              class="word-item"
              :class="{ 
                'selected': selectedEnglish === index,
                'matched': isEnglishMatched(index)
              }"
              @click="selectEnglish(index)"
            >
              {{ word }}
            </div>
          </div>
          
          <div class="meanings-column">
            <h3>中文含义</h3>
            <div 
              v-for="(meaning, index) in chineseMeanings" 
              :key="index"
              class="word-item"
              :class="{ 
                'selected': selectedChinese === index,
                'matched': isChineseMatched(index)
              }"
              @click="selectChinese(index)"
            >
              {{ meaning }}
            </div>
          </div>
        </div>
        
        <div class="game-controls">
          <button class="btn" @click="restartGame">重新开始</button>
          <button class="btn" @click="goHome">返回首页</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getRandomWords } from '../data/words.js'

export default {
  name: 'WordMatch',
  data() {
    return {
      gameStarted: false,
      gameEnded: false,
      words: [],
      englishWords: [],
      chineseMeanings: [],
      selectedEnglish: null,
      selectedChinese: null,
      matchedPairs: [], // 存储匹配成功的单词对
      score: 0,
      totalWords: 0,
      timeElapsed: 0,
      timer: null
    }
  },
  computed: {
    accuracy() {
      return this.totalWords > 0 ? Math.round((this.score / this.totalWords) * 100) : 0
    }
  },
  methods: {
    startGame() {
      this.gameStarted = true
      this.gameEnded = false
      this.words = getRandomWords(8)
      this.englishWords = this.words.map(w => w.word)
      this.chineseMeanings = this.words.map(w => w.meaning).sort(() => Math.random() - 0.5)
      this.totalWords = this.words.length
      this.score = 0
      this.matchedPairs = []
      this.selectedEnglish = null
      this.selectedChinese = null
      this.timeElapsed = 0
      
      this.timer = setInterval(() => {
        this.timeElapsed++
      }, 1000)
    },
    
    selectEnglish(index) {
      // 如果已经匹配过，则不能选择
      if (this.isEnglishMatched(index)) return
      this.selectedEnglish = index
      this.checkMatch()
    },
    
    selectChinese(index) {
      // 如果已经匹配过，则不能选择
      if (this.isChineseMatched(index)) return
      this.selectedChinese = index
      this.checkMatch()
    },
    
    isEnglishMatched(index) {
      return this.matchedPairs.some(pair => pair.englishIndex === index)
    },
    
    isChineseMatched(index) {
      return this.matchedPairs.some(pair => pair.chineseIndex === index)
    },
    
    checkMatch() {
      if (this.selectedEnglish !== null && this.selectedChinese !== null) {
        const englishWord = this.englishWords[this.selectedEnglish]
        const chineseMeaning = this.chineseMeanings[this.selectedChinese]
        const correctMeaning = this.words.find(w => w.word === englishWord)?.meaning
        
        if (chineseMeaning === correctMeaning) {
          // 正确匹配
          this.matchedPairs.push({
            englishIndex: this.selectedEnglish,
            chineseIndex: this.selectedChinese,
            word: englishWord,
            meaning: chineseMeaning
          })
          this.score++
          
          if (this.matchedPairs.length === this.totalWords) {
            this.endGame()
          }
        }
        
        // 重置选择
        setTimeout(() => {
          this.selectedEnglish = null
          this.selectedChinese = null
        }, 500)
      }
    },
    
    endGame() {
      clearInterval(this.timer)
      this.gameEnded = true
    },
    
    restartGame() {
      this.gameStarted = false
      this.gameEnded = false
    },
    
    goHome() {
      this.$router.push('/')
    },
    
    formatTime(seconds) {
      const mins = Math.floor(seconds / 60)
      const secs = seconds % 60
      return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
    }
  },
  
  beforeUnmount() {
    if (this.timer) {
      clearInterval(this.timer)
    }
  }
}
</script>

<style scoped>
h1 {
  text-align: center;
  color: #2c3e50;
  margin-bottom: 20px;
}

.game-intro p {
  text-align: center;
  color: #7f8c8d;
  font-size: 1.2em;
  margin-bottom: 30px;
}

.game-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
  flex-wrap: wrap;
  gap: 10px;
}

.game-info > div {
  background: linear-gradient(45deg, #74b9ff, #0984e3);
  color: white;
  padding: 10px 20px;
  border-radius: 20px;
  font-weight: bold;
  flex: 1;
  min-width: 120px;
  text-align: center;
}

.matching-area {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-bottom: 30px;
}

.words-column,
.meanings-column {
  text-align: center;
}

.words-column h3,
.meanings-column h3 {
  color: #2c3e50;
  margin-bottom: 20px;
  font-size: 1.3em;
}

.word-item {
  background: linear-gradient(135deg, #74b9ff, #0984e3);
  color: white;
  padding: 15px;
  margin: 10px 0;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: bold;
  font-size: 1.1em;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.word-item:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}

.word-item.selected {
  background: linear-gradient(135deg, #fdcb6e, #e17055);
  transform: scale(1.1);
}

.word-item.matched {
  background: linear-gradient(135deg, #00b894, #00cec9);
  cursor: default;
}

.word-item.matched:hover {
  transform: none;
}

.game-controls {
  text-align: center;
  margin-top: 20px;
}

.game-controls .btn {
  margin: 0 10px;
  margin-bottom: 10px;
}

.game-result {
  text-align: center;
}

.game-result h2 {
  color: #2c3e50;
  margin-bottom: 30px;
  font-size: 2em;
}

.score-display {
  margin-bottom: 30px;
}

.score-display > div {
  margin: 10px 0;
  font-size: 1.2em;
  font-weight: bold;
}

/* 移动端优化 */
@media (max-width: 768px) {
  .matching-area {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .game-info {
    flex-direction: column;
    gap: 10px;
  }
  
  .game-info > div {
    min-width: auto;
    font-size: 14px;
    padding: 8px 15px;
  }
  
  .word-item {
    padding: 12px;
    font-size: 14px;
    margin: 5px 0;
  }
  
  .game-controls .btn {
    display: block;
    width: 100%;
    margin: 5px 0;
  }
  
  h1 {
    font-size: 1.8em;
  }
  
  .game-intro p {
    font-size: 1em;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 5px;
  }
  
  .matching-area {
    gap: 15px;
  }
  
  .word-item {
    padding: 10px;
    font-size: 13px;
    margin: 3px 0;
  }
  
  .words-column h3,
  .meanings-column h3 {
    font-size: 1.1em;
    margin-bottom: 15px;
  }
  
  .game-info > div {
    font-size: 12px;
    padding: 6px 12px;
  }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
  .word-item:hover {
    transform: none;
  }
  
  .word-item:active {
    transform: scale(0.95);
  }
  
  .word-item.selected:active {
    transform: scale(1.05);
  }
}
</style> 